<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_027_组件的综合案例</title>
    <style type="text/css">
        .container{
            width: 250px;
            margin:0 auto;
            border:1px solid red;
        }
        .title{
            background-color: #A4D0E3;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .item{
            /* border:1px solid red; */
            height: 50px;
        }
        .img{
            /* border:1px solid red; */
            float: left;
        }
        .name{
            /* border:1px solid red; */
            width:70px;
            height: 38px;
            float: left;
            line-height: 38px;
        }
        .change{
            /* border:1px solid blue; */
            float:left;
            line-height: 38px;
        }
        .change input{
            width: 30px;
            height: 25px;
        }
        a{
            background-color:#D2CFD0;
            text-decoration:none;
            padding: 0 3px;
        }
        .del{
            float: left;
            line-height: 38px;
            margin-left: 20px;
            color:red;
            font-size: 20px;
        }
        .total{
            background-color: #FFCB40;
            height: 40px;
            line-height: 40px;
        }
        .total div{
            float: right;
            margin-right:5px
        }
    </style>
</head>
<body>
    <div id="app">
        <my-card></my-card>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //提供事件中心
        var hab = new Vue();

        var cardtitle = {
            props:["uname"],
            template:`
                <div class="title">{{uname}}的商品</div>
            `
        }
        var cardbody = {
            props:["myInfo"],
            template:`
            <div class="card">
                   <div v-for="item in myInfo" class="item">
                       <div class="img"><img :src="item.imgURL"></div>
                       <div class="name"></div>
                       <div class="change">
                           <a href="">-</a>
                           <input type="text" class="num" :value="item.num" @blur="$emit('change-num',item.id,$event)">
                           <a href.pre="">+</a>
                       </div>
                       <div class="del">X</div>
                   </div>
                   <hr />
               </div>
            `
        }
        var cardfooter = {
            props:["yourinfo"],
            template:`
                <div class="total">
                   <div>
                       <span>总价：{{computedprice}}</span>
                       <button>结算</button>
                   </div>
               </div>
            `,
            computed:{
                // 总价的计算
                computedprice:function(){
                    var pricesum = 0;
                    this.yourinfo.forEach(function(info){
                        pricesum += info.num * info.price
                    });
                    return pricesum;
                }
            }
        }

        Vue.component("my-card",{
            data:function(){
                return{
                    uname:"张三",
                    info:[
                        {
                            id:0,
                            imgURL:"vue_027_img/1.JPG",
                            num:1,
                            price:1
                        },
                        {
                            id:1,
                            imgURL:"vue_027_img/2.JPG",
                            num:1,
                            price:2
                        },
                        {
                            id:2,
                            imgURL:"vue_027_img/3.JPG",
                            num:1,
                            price:3
                        },
                        {
                            id:3,
                            imgURL:"vue_027_img/4.JPG",
                            num:1,
                            price:3
                        },
                        {
                            id:4,
                            imgURL:"vue_027_img/5.JPG",
                            num:3,
                            price:4
                        }
                    ]
                }
            },
            template:`
                <div class="container">
                    <card-title :uname="uname"></card-title>
                    <card-body :myInfo="info"  @change-num="changenum"></card-body>
                    <card-footer :yourinfo="info" ></card-footer>
                </div>
            `,
            components:{
                "card-title":cardtitle,
                "card-body":cardbody,
                "card-footer":cardfooter,
            },
            methods:{
                changenum:function(id,el){
                    var num = el.target.value;
                    this.info.some(function(item){
                        if(id == item.id){
                            item.num = num;
                            //终止遍历
                            return true;
                        }
                    });
                }
            }
        });
        
        

        var vm = new Vue({
            el:'#app',
            data:{
                title:"我的商品"
            }
        });

    </script>
</body>

</html></SCRIPT>